<!--店铺图片-->
<style>
.img {
  float: left;
  width: 32%;
  margin: 2px;
}

</style>
<template>
  <div>
    <div style="margin: 3px;">
      <tab :line-width=2 active-color='#fc378c' v-model="index">
        <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index">{{item}}</tab-item>
      </tab>
      <swiper v-model="index" height="530px" :show-dots="false">
        <swiper-item :key="0">
          <div class="tab-swiper vux-center">
            <img class="img previewer-demo-img" v-for="(item, index) in data2" :key="item" :src="item" @click="show(index)"></img>
          </div>
        </swiper-item>
        <swiper-item :key="1">
          <div class="tab-swiper vux-center">
            <img class="img previewer-demo-img" v-for="(item, index) in data3" :key="item" :src="item" @click="show(index)"></img>
          </div>
        </swiper-item>
        <swiper-item :key="2">
          <div class="tab-swiper vux-center">
            <img class="img previewer-demo-img" v-for="(item, index) in data4" :key="item" :src="item" @click="show(index)"></img>
          </div>
        </swiper-item>
      </swiper>
    </div>
    <div v-transfer-dom>
      <previewer :list="showList" ref="previewer" :options="options"></previewer>
    </div>
  </div>
</template>
<script>
import { Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem, Previewer, TransferDom } from 'vux'
const list = () => ['店内环境', '店外环境', '餐品']
export default {
  directives: {
    TransferDom
  },
  components: {
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem,
    Previewer
  },
  data() {
    return {
      userId: window.localStorage["userId"],
      storeId: this.$route.query.storeId,
      list2: list(),
      index: 0,
      demo2: '店内环境',
      data2: [],
      data3: [],
      data4: [],
      showList: [],
      options: {
        getThumbBoundsFn(index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
          // get window scroll Y
          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect()
          // w = width
          return {
            x: rect.left,
            y: rect.top + pageYScroll,
            w: rect.width
          }
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    }
  },
  created() {
    this.load()
  },
  watch: {
    index() {
      this.load()
    }
  },
  methods: {
    show(index) {
      this.$refs.previewer.show(index)
    },
    loadPreviewer(list) {
      let _that = this
      this.showList = []
      list.forEach(function(o) {
        let b = {
          src: o,
          w: 800,
          h: 600
        }
        _that.showList.push(b)
      })
    },
    load() {
      let _that = this
      let imageType = 2
      if (this.index == 1) {
        imageType = 3
      } else if (this.index == 2) {
        imageType = 4
      }
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/sthoughts/queryImages.json",
        params: {
          userId: this.userId,
          storeId: this.storeId,
          imageType: imageType
        },
        successFc: (response) => {
          if (this.index == 0) {
            this.data2 = response.data.data
          } else if (this.index == 1) {
            this.data3 = response.data.data
          } else {
            this.data4 = response.data.data
          }
          //防止放大图片的时候，第一次失效
          _that.loadPreviewer(response.data.data)
        }
      });
    }
  }
}

</script>
